<template>
  <div class="box1">
    <div class="box_header">员工管理</div>
    <div class="box_main">
      <el-tabs type="border-card">
        <el-tab-pane label="部门列表">
          <p>
            搜索 ：
            <el-input v-model="input" placeholder="请输入部门名称" style="width: 200px" />
            <el-button @click="cha">查询</el-button>
            <el-button type="primary" @click="dialogVisible = true">创建部门</el-button>

            <el-dialog
              v-model="dialogVisible"
              title="Tips"
              width="30%"
              :before-close="handleClose"
            >
              <span>
                <el-form
                  :label-position="labelPosition"
                  label-width="100px"
                  :model="formLabelAlign"
                  style="max-width: 460px"
                >
                  <el-form-item label="部门序号">
                    <el-input
                      v-model="formLabelAlign.id"
                      placeholder="必填项，输入序号且不能重复"
                    />
                  </el-form-item>
                  <el-form-item label="部门名称">
                    <el-input
                      v-model="formLabelAlign.name"
                      placeholder="必填项，限制20个字符，汉字"
                    />
                  </el-form-item>
                  <el-form-item label="负责人">
                    <el-input
                      v-model="formLabelAlign.charge"
                      placeholder="必填项，限制20个字符，汉字"
                    />
                  </el-form-item>
                  <el-form-item label="职务">
                    <el-input
                      v-model="formLabelAlign.job"
                      placeholder="必填项，限制20个字符，汉字"
                    />
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input
                      v-model="formLabelAlign.tel"
                      placeholder="必填项，限制11个字符，数字"
                    />
                  </el-form-item>
                  <el-form-item label="数量">
                    <el-input v-model="formLabelAlign.num" placeholder="选填项" />
                  </el-form-item>
                </el-form>
              </span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="quit">退出编辑</el-button>
                  <el-button type="primary" @click="submit"> 确认提交 </el-button>
                </span>
              </template>
            </el-dialog>
          </p>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="80" />
            <el-table-column prop="name" label="部门名称" width="100" />
            <el-table-column prop="num" label="员工数量" width="80" />
            <el-table-column prop="charge" label="负责人" width="100" />
            <el-table-column prop="job" label="职务" width="100" />
            <el-table-column prop="tel" label="手机号" width="150" />
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button link type="primary" size="small" @click="handleClick(row)"
                  >编辑</el-button
                >
                <el-button link type="primary" size="small" @click="quan(row)"
                  >权限设置</el-button
                >
                <el-button link type="primary" size="small" @click="shan(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-dialog v-model="centerDialogVisible" title="Warning" width="70%" align-center>
          <span>
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              >用户管理</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>

            <el-checkbox
              v-model="checkAll1"
              :indeterminate="isIndeterminate1"
              @change="handleCheckAllChange1"
              >员工管理</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedCities1"
              @change="handleCheckedCitiesChange1"
            >
              <el-checkbox v-for="city in cities1" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>

            <el-checkbox
              v-model="checkAll2"
              :indeterminate="isIndeterminate2"
              @change="handleCheckAllChange2"
              >订单管理</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedCities2"
              @change="handleCheckedCitiesChange2"
            >
              <el-checkbox v-for="city in cities2" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </span>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="centerDialogVisible = false">
                提交
              </el-button>
            </span>
          </template>
        </el-dialog>
        <el-tab-pane label="员工列表">
        <Yg/>
        
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
const input = ref("");
const input1 = ref("");
const tableData = ref([]);
const tableData1 = ref([]);
import type { FormProps } from "element-plus";
import Yg from '@/components/Yg.vue'
const dialogVisible = ref(false);
const labelPosition = ref<FormProps["labelPosition"]>("right");
var pattern = /^1[3-9]\d{9}$/;
import { ElMessage } from "element-plus";
const isEdit = ref(false);
const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};
const centerDialogVisible = ref(false);

import {
  GET_BM,
  POST_BMXZ,
  GET_DELECT,
  POST_UPDATA,
  GET_Search,
  GET_YG,
} from "@/api/api.js";
GET_BM()
  .then((res) => {
    console.log(res);
    tableData.value = res.data.data;
  })
  .catch((err) => {});

GET_YG()
  .then((res) => {
    console.log(res);
    tableData1.value = res.data.data;
  })
  .catch((err) => {});

const formLabelAlign = reactive({
  name: "",
  charge: "",
  job: "",
  tel: "",
  num: "",
  id: "",
});

const submit = () => {
  if (
    formLabelAlign.charge == "" &&
    formLabelAlign.name == "" &&
    formLabelAlign.job == "" &&
    formLabelAlign.tel == ""
  ) {
    alert("内容不能空");
  } else {
    if (formLabelAlign.charge.length < 20) {
      if (formLabelAlign.job.length < 10) {
        if (formLabelAlign.name.length < 20) {
          if (pattern.test(formLabelAlign.tel)) {
            if (isEdit.value) {
              console.log(formLabelAlign);
              const editedEntry = tableData.value.find(
                (item) => item.id === formLabelAlign.id
              );
              console.log(editedEntry);
              if (editedEntry) {
                console.log("修改");
                const data = {
                  id: formLabelAlign.id,
                  charge: formLabelAlign.charge,
                  name: formLabelAlign.name,
                  job: formLabelAlign.job,
                  tel: formLabelAlign.tel,
                  num: formLabelAlign.num,
                };
                POST_UPDATA(data)
                  .then((res) => {
                    console.log(res);
                    GET_BM()
                      .then((res1) => {
                        console.log(res1);
                        tableData.value = res1.data.data;
                        ElMessage({
                          message: "修改成功",
                          grouping: true,
                          type: "success",
                        });
                      })
                      .catch((err) => {});
                  })
                  .catch((err) => {});
              }
              formLabelAlign.charge = "";
              formLabelAlign.id = "";
              formLabelAlign.name = "";
              formLabelAlign.job = "";
              formLabelAlign.tel = "";
              formLabelAlign.num = "";
              dialogVisible.value = false;
            } else {
              console.log("新增");

              const data = {
                id: formLabelAlign.id,
                charge: formLabelAlign.charge,
                name: formLabelAlign.name,
                job: formLabelAlign.job,
                tel: formLabelAlign.tel,
                num: formLabelAlign.num,
              };
              POST_BMXZ(data)
                .then((res) => {
                  console.log(res);
                  GET_BM()
                    .then((res1) => {
                      console.log(res1);
                      tableData.value = res1.data.data;
                      ElMessage({
                        message: "添加成功",
                        grouping: true,
                        type: "success",
                      });
                    })
                    .catch((err) => {});
                })
                .catch((err) => {
                  console.log(err);
                });

              formLabelAlign.charge = "";
              formLabelAlign.id = "";
              formLabelAlign.name = "";
              formLabelAlign.job = "";
              formLabelAlign.tel = "";
              formLabelAlign.num = "";
              dialogVisible.value = false;
            }
          } else {
            ElMessage({
              dangerouslyUseHTMLString: true,
              message: "手机号格式不对",
            });
          }
        } else {
          ElMessage({
            dangerouslyUseHTMLString: true,
            message: "职务格式不对",
          });
        }
      } else {
        ElMessage({
          dangerouslyUseHTMLString: true,
          message: "负责人格式不对",
        });
      }
    } else {
      ElMessage({
        dangerouslyUseHTMLString: true,
        message: "部门格式不对",
      });
    }
  }
};
//退出编辑
const quit = () => {
  dialogVisible.value = false;
  formLabelAlign.charge = "";
  formLabelAlign.id = "";
  formLabelAlign.name = "";
  formLabelAlign.job = "";
  formLabelAlign.tel = "";
  formLabelAlign.num = "";
  dialogVisible.value = false;
};
const cha = () => {
  if (input.value == "") {
    GET_BM()
      .then((res1) => {
        console.log(res1);
        tableData.value = res1.data.data;
      })
      .catch((err) => {});
  } else {
    const parmas = {
      searchVal: input.value,
    };
    GET_Search(parmas)
      .then((res) => {
        console.log(res);
        tableData.value = res.data.data;
      })
      .catch((err) => {});
  }
};


const shan = (row) => {
  tableData.value.forEach((item, index) => {
    if (item.id === row.id) {
      console.log(row.id);
      const parmas = {
        id: row.id,
      };
      GET_DELECT(parmas)
        .then((res) => {
          console.log(res);
          GET_BM()
            .then((res1) => {
              console.log(res1);
              tableData.value = res1.data.data;
            })
            .catch((err) => {});
        })
        .catch((err) => {
          console.log(err);
        });
    }
  });
};
const shan1 = (row) => {
  tableData1.value.forEach((item, index) => {
    if (item.id == row.id) {
      tableData1.value.splice(index, 1);
    }
  });
};
//编辑
const handleClick = (row) => {
  isEdit.value = true;
  console.log(row);
  dialogVisible.value = true;
  formLabelAlign.charge = row.charge;
  formLabelAlign.name = row.name;
  formLabelAlign.id = row.id;
  formLabelAlign.job = row.job;
  formLabelAlign.tel = row.tel;
  formLabelAlign.num = row.num;
};
const handleClick1 = (row) => {
  // isEdit.value = true;
  console.log(row);
  // dialogVisible.value = true;
  // formLabelAlign.name = row.name1;
  // formLabelAlign.region = row.name;
  // formLabelAlign.id = row.id;
  // formLabelAlign.type = row.job;
  // formLabelAlign.phone = row.phone;
  // formLabelAlign.password = row.password;
  // formLabelAlign.num = row.num;
};

const quan = (row) => {
  console.log(row);
  centerDialogVisible.value = true;
};

//员工
const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref(["Shanghai", "Beijing"]);
const cities = ["用户列表", "添加用户", "删除用户", "编辑"];

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === cities.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};

const checkAll1 = ref(false);
const isIndeterminate1 = ref(true);
const checkedCities1 = ref(["Shanghai", "Beijing"]);
const cities1 = ["员工列表", "部门设置", "添加员工", "删除员工", "编辑"];

const handleCheckAllChange1 = (val: boolean) => {
  checkedCities1.value = val ? cities1 : [];
  isIndeterminate1.value = false;
};
const handleCheckedCitiesChange1 = (value: string[]) => {
  const checkedCount = value.length;
  checkAll1.value = checkedCount === cities1.length;
  isIndeterminate1.value = checkedCount > 0 && checkedCount < cities1.length;
};

const checkAll2 = ref(false);
const isIndeterminate2 = ref(true);
const checkedCities2 = ref(["Shanghai", "Beijing"]);
const cities2 = ["订单列表", "编辑"];

const handleCheckAllChange2 = (val: boolean) => {
  checkedCities2.value = val ? cities2 : [];
  isIndeterminate2.value = false;
};
const handleCheckedCitiesChange2 = (value: string[]) => {
  const checkedCount = value.length;
  checkAll2.value = checkedCount === cities2.length;
  isIndeterminate2.value = checkedCount > 0 && checkedCount < cities2.length;
};
</script>
<style scoped lang="scss">
.box1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .box_header {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
  }
  .box_main {
    width: 100%;
    flex: 1;
  }
}
</style>
